<template>
  <view class="kd-my-page" :class="{ 'bottom-area': isIphoneX }">
    <view class="user-info-wrap">
      <view class="avatar-wrap">
        <image :src="userInfo.avatar" class="avatar"></image>
      </view>
      <view class="name-phone-wrap">
        <view class="name-wrap">{{ userInfo.username }}</view>
        <view class="phone-wrap">{{ userInfo.mobile }}</view>
      </view>
    </view>

    <view class="available-commission-wrap">
      <view class="available-commission-content">
        <view class="left">
          <view class="text">可提现佣金</view>
          <view class="val-wrap">
            <view class="val">{{ userInfo.money || 0 }}</view>
            <view class="unit">元</view>
          </view>
        </view>
        <view class="right-btn" @click="handleToWithdrawal">提现</view>
      </view>
    </view>

    <view class="commission-wrap">
      <view class="commission-content">
        <view class="commission-row">
          <view class="text already">已提现佣金</view>
          <view class="val">{{ userInfo.with_num || 0 }}元</view>
        </view>
        <view class="line"></view>
        <view class="commission-row">
          <view class="text not">未结算佣金</view>
          <view class="val">{{ userInfo.order_money || 0 }}元</view>
        </view>
      </view>
    </view>

    <view class="application-wrap">
      <view class="application-content">
        <view class="application" @click="handleToKdWallet">
          <image
            src="/static/image/active2.png"
            class="application-img"
          ></image>
          <view class="application-name">钱包</view>
          <view class="application-value">
            <text class="val">{{ userInfo.money || 0 }}</text
            >元
          </view>
        </view>

        <view class="application" @click="handleToKdOrder">
          <image
            src="/static/image/active1.png"
            class="application-img"
          ></image>
          <view class="application-name">订单</view>
          <view class="application-value"> </view>
        </view>

        <view class="application" @click="handleToEval">
          <image
            src="/static/image/active3.png"
            class="application-img"
          ></image>
          <view class="application-name">评价</view>
        </view>

        <view class="application" @click="handleToWithdrawalRecords">
          <image
            src="/static/image/active1.png"
            class="application-img"
          ></image>
          <view class="application-name">提现记录</view>
        </view>

        <view class="application">
          <image
            src="/static/image/active4.png"
            class="application-img"
          ></image>
          <view class="application-name">客服</view>

          <button open-type="contact" class="contact-btn" @contact="contact"></button>
        </view>
      </view>
    </view>

    <KdTabBar />
  </view>
</template>

<script>
import KdTabBar from "@/components/KdTabBar/index.vue";
const app = getApp();
export default {
  components: {
    KdTabBar
  },
  data() {
    return {
      userInfo: {
        id: "",
        avatar: "",
        username: "",
        mobile: "",
      },
      curTabIndex: 2,
      isIphoneX: false,
    };
  },
  methods: {
    handleToWithdrawalRecords() {
      uni.navigateTo({
        url: "/pages/rider/withdrawalRecords",
      });
    },
    handleToEval() {
      const { comment_score, id } = this.userInfo;

      uni.navigateTo({
        url:
          "/pages/rider/evaluate?score=" +
          comment_score +
          "&id=" +
          id,
      });
    },
    handleToKdOrder() {
      uni.navigateTo({
        url: "/pages/kdOrder/list",
      });
    },
    handleToKdWallet() {
      const { money } = this.userInfo;

      uni.navigateTo({
        url: "/pages/rider/wallet?money=" + money,
      });
    },
    handleToWithdrawal() {
      const { userInfo } = this;
      const { money } = userInfo;

      uni.navigateTo({
        url: "/pages/rider/withdrawal?money=" + money,
      });
    },
    handleGetRiderInfo() {
      app
        .request({}, "/api/logistics/express/express_user_info")
        .then((res) => {
          console.log(res);
          const { code, data } = res;

          if (code === 1) {
            this.userInfo = {
              ...data,
              avatar: app.globalData.ftp + data.avatar,
            };
          }
        });
    },
    contact(data){
      console.log("data++++",data)
    }
  },
  onShow() {},
  onLoad() {
    this.isIphoneX = app.globalData.isIphoneX;
    this.handleGetRiderInfo();
  },
};
</script>

<style lang="scss">
.bottom-area {
  padding-bottom: 130rpx;
}

.kd-my-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 100rpx;
  box-sizing: border-box;

  .user-info-wrap {
    width: 100%;
    height: 160rpx;
    background-color: #ea554e;
    display: flex;
    align-items: center;
    padding-left: 28rpx;
    box-sizing: border-box;

    .avatar-wrap {
      margin-right: 36rpx;

      .avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }
    }

    .name-phone-wrap {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10rpx 0;
      box-sizing: border-box;
      font-size: 26rpx;
      color: #fff;
      height: 100rpx;

      .name-wrap {
      }

      .phone-wrap {
      }
    }
  }

  .available-commission-wrap {
    width: 100%;
    height: 130rpx;
    background-color: #ea554e;
    padding: 0 22rpx;
    box-sizing: border-box;

    .available-commission-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      border-top: 1rpx solid #ffdbd1;

      .left {
        color: #fff;

        .text {
          font-size: 28rpx;
          margin-bottom: 4rpx;
        }

        .val-wrap {
          display: flex;
          align-items: flex-end;

          .val {
            font-size: 36rpx;
            margin-right: 2rpx;
          }

          .unit {
            font-size: 26rpx;
            margin-bottom: 4rpx;
          }
        }
      }

      .right-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100rpx;
        height: 50rpx;
        border: 1rpx solid #fff;
        color: #fff;
        font-size: 26rpx;
        border-radius: 20rpx;
      }
    }
  }

  .commission-wrap {
    width: 100%;
    height: 160rpx;
    padding: 0 28rpx;
    margin: 24rpx 0;
    box-sizing: border-box;

    .commission-content {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 6rpx;

      .line {
        width: 1rpx;
        height: 80rpx;
        background-color: #bcbcbc;
      }

      .commission-row {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24rpx;

        .text {
          margin-bottom: 12rpx;
        }

        .already {
          color: #64a151;
        }

        .not {
          color: #ee9b3f;
        }

        .val {
          color: #6a6a6a;
        }
      }
    }
  }

  .application-wrap {
    width: 100%;
    padding: 0 28rpx;
    box-sizing: border-box;

    .application-content {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      background-color: #fff;
      border-radius: 6rpx;

      .application {
        position: relative;
        width: 33.33%;
        display: flex;
        // justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 24rpx;
        margin:20rpx 0;
        .application-img {
          width: 74rpx;
          height: 74rpx;
          margin-bottom: 12rpx;
        }

        .application-name {
          color: #575757;
          margin: 6rpx 0;
        }

        .application-value {
          color: #575757;

          .val {
            color: #ea748a;
          }
        }

        .contact-btn {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 99;
          opacity: 0;
        }
      }
    }
  }
}
</style>